<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="q.gatewayId" class="filter-item" placeholder="请选择网关" clearable>
        <el-option v-for="item in gateways" :key="item.id" :label="item.company" :value="item.id">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getMgtDataCache">搜索</el-button>
      <el-button v-permission="['Admin.Transpond.Update']" :disabled="!q.gatewayId" class="filter-item" type="danger" icon="el-icon-delete" @click="deleteMgtDataCacheByGatewayId">基于选中网关删除</el-button>
      <el-button v-permission="['Admin.Transpond.Update']" class="filter-item" type="danger" icon="el-icon-delete" @click="deleteAllMgtDataCache">删除所有</el-button>
      <el-button
        v-permission="['Admin.Transpond.Update']"
        :disabled="itemsChecked.length === 0"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="deleteData()"
      >批量删除
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="dataCaches"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
      <el-table-column label="网关ID" prop="gatewayId" min-width="190"></el-table-column>
      <el-table-column label="大小" prop="size" align="center" min-width="90">
        <template slot-scope="{row}">
          {{ row.size || 0 }}KB
        </template>
      </el-table-column>
      <el-table-column :label="'创建时间'" prop="creationTime" sortable="custom" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.creationTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="showMore(row.id)">查看</el-button>
          <el-button v-permission="['Admin.Transpond.Update']" size="mini" type="danger" @click="deleteData(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalCount > 0"
      :total="totalCount"
      :page-index.sync="q.page"
      :page-size.sync="q.size"
      @pagination="getMgtDataCache"
    />
    <data-cache-detail-drawer ref="dataCacheDetailDrawer"></data-cache-detail-drawer>
  </div>
</template>

<script>
  import {
    getGatewayShort,
    getMgtDataCache,
    deleteMgtDataCache,
    deleteAllMgtDataCache,
    deleteMgtDataCacheByGatewayId
  } from "@/api/gateway";
  import Pagination from "@/components/Pagination";
  import DataCacheDetailDrawer from "./components/DataCacheDetailDrawer";
  import _ from "lodash";

  export default {
    components: {
      DataCacheDetailDrawer,
      'pagination': Pagination
    },
    data() {
      return {
        isSubmitLoading: false,
        gateways: [],
        tableLoading: false,
        tableKey: 0,
        dataCaches: [],
        itemsChecked: [],
        q: {
          gatewayId: undefined,
          page: 1,
          size: 10
        },
        totalCount: 0
      };
    },
    computed: {},
    created() {
      this.getGatewayShort();
    },
    methods: {
      getGatewayShort() {
        getGatewayShort().then(result => {
          this.gateways = result;
          // this.q.gatewayId = result[0].id;
          this.getMgtDataCache();
        });
      },
      getMgtDataCache() {
        this.tableLoading = true;
        getMgtDataCache(this.q).then(result => {
          this.dataCaches = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      indexMethod(index) {
        return this.q.size * (this.q.page - 1) + index + 1;
      },
      selectionChange(selection) {
        this.itemsChecked = selection;
      },
      deleteData(id) {
        let selectedIds = [];
        if (id) {
          selectedIds = [id];
        } else {
          selectedIds = this.itemsChecked.map(item => _.parseInt(item.id));
          if (selectedIds.length <= 0) {
            this.$message({ message: "至少选中一条记录", type: "warning" });
            return;
          }
        }

        this.$confirm("删除后不可恢复， 是否继续?", "确定执行删除操作吗？", {
          type: "warning"
        })
          .then(() => {
            deleteMgtDataCache(selectedIds).then(() => {
              this.getMgtDataCache();
              this.$message({ message: "删除成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      deleteAllMgtDataCache() {
        this.$confirm("删除后不可恢复，是否继续?", "确定执行全部删除操作吗？", {
          type: "warning"
        })
          .then(() => {
            deleteAllMgtDataCache().then(() => {
              this.getMgtDataCache();
              this.$message({ message: "删除成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      deleteMgtDataCacheByGatewayId() {
        this.$confirm("删除后不可恢复，是否继续?", "确定执行删除选中网关的数据缓存操作吗？", {
          type: "warning"
        })
          .then(() => {
            deleteMgtDataCacheByGatewayId(this.q.gatewayId).then(() => {
              this.getMgtDataCache();
              this.$message({ message: "删除成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      showMore(id) {
        this.$refs["dataCacheDetailDrawer"].show(id);
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
